<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>what</title>
    <link rel="stylesheet" href="element-ui@2.12.0.css">
    <link rel="stylesheet" type="text/css" href="popup_index.css">
</head>

<body>
    <div id="app">
        <el-container>
            <el-main>
                <el-tabs tab-position="top">
                    <el-tab-pane label="时间互转">
                        <table>
                            <tr>
                                <th>开始时间</th>
                                <th>00点</th>
                                <th>{{timestamp.hour}}点</th>
                            </tr>
                            <tr>
                                <td>
                                    <input class="little-input" v-model="timestamp.year" @change="changeEvent(1)">
                                    <input class="little-input" v-model="timestamp.month" @change="changeEvent(1)">
                                    <input class="little-input" v-model="timestamp.day" @change="changeEvent(1)">
                                    <input class="little-input" v-model="timestamp.hour" @change="changeEvent(1)">
                                </td>
                                <td>{{ start[0] }}</td>
                                <td>{{ start[1] }}</td>
                            </tr>
                            <tr>
                                <th>结束时间</th>
                                <th>23:59:59</th>
                                <th>{{timestamp_end.hour}}:59:59</th>
                            </tr>
                            <tr>
                                <td>
                                    <input class="little-input" v-model="timestamp_end.year" @change="changeEvent(2)">
                                    <input class="little-input" v-model="timestamp_end.month" @change="changeEvent(2)">
                                    <input class="little-input" v-model="timestamp_end.day" @change="changeEvent(2)">
                                    <input class="little-input" v-model="timestamp_end.hour" @change="changeEvent(2)">
                                </td>
                                <td>{{ end[0] }}</td>
                                <td>{{ end[1] }}</td>
                            </tr>
                            <tr>
                                <th>时间戳</th>
                                <th>时间</th>
                                <th>时间(有毫秒)</th>
                            </tr>
                            <tr>
                                <td><input v-model="times" @change="changeEvent(3)"> </td>
                                <td>{{ format[0] }}</td>
                                <td>{{ format[1] }}</td>
                            </tr>
                        </table>
                        <div class="panel">
                            <table>
                                <tr>
                                    <th>历史记录</th>
                                    <th><button @click="clearCache">清空缓存({{cacheItem[1]}})</button> </th>
                                    <th> </th>
                                </tr>
                                <tr v-for="item in cacheItem[0]">

                                    <td>{{item.split('@')[0]}}</td>
                                    <td>{{item.split('@')[1]}}</td>
                                    <td>{{item.split('@')[2]}} </td>
                                </tr>
                            </table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="自定义页签">
                        <el-form>
                            <el-form-item label="页签地址：">
                                <el-input v-model="customerTabUrl"
                                    clearable>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="changeUrl">保存</el-button>
                            </el-form-item>
                            </el-alert>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </div>

    <script src="vue.min.js"></script>
    <script src="element-ui@2.12.0.js"></script>
    <script src="popup_index.js"></script>
</body>

</html>